<template>
<div >
 <ylheader :leftsvg="true" :title="pagemark==0?'填写地址':'填写信息'" ></ylheader>

  <!-- 姓名，手机号，所属地区模块 -->
	<table class = "tablespecial">
		<tr><!-- 点击可以修改提示 -->
			<td>
			<div class = "commonbottomline">
				<div class = "commonleftblank toptapchange" v-if="pagemark==0" style="margin:0;padding-left:0.2rem">请输入您的收货地址</div>
				<div class = "commonleftblank toptapchange" v-else style="margin:0;padding-left:0.2rem">请输入您的个人信息</div>
			</div>
			</td>
		</tr>
    <tr > <!-- 姓名 -->
      <td>
      <div class = "commonrow nameborder" >
          <span class = "commonleftblank namemiddleborder" >
            姓名
          </span>
        <div class = "textoutdivstyle" style="border-left:1px #d2d2d2 solid;height:0.9rem">
          <input placeholder="请输入姓名" class ="textinputstyle" type="text" v-model="name" />
        </div>
      </div>

      </td>
    </tr>
    <tr> <!-- 手机号 -->
      <td>
      <div class = "commonrow seporatebackgroundone phoneborder" style="margin-top:-0.05rem" >
        <span class = "commonleftblank namemiddleborder" style="margin-left:0.18rem">
          手机号
        </span>
        <div class = "textoutdivstyle" style="border-left:1px #d2d2d2 solid;height:0.85rem">
          <input placeholder="请输入手机号" v-model="phone" id="addressphone" maxlength="11" class ="textinputstyle seporatebackgroundone" type="text" name="sctel" onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" onafterpaste="this.value=this.value.replace(/[^0-9]/g,'')"/>
        </div>

      </div>
      </td>
    </tr>
		<tr v-if="pagemark==0"> <!-- 所属地区 -->
			<td>
			<div class = "commonrow seporatebackgroundtwo" style="margin:0 0.3rem;height:0.5rem;line-height:0.6rem">
				<span class = "commonleftblank" style="margin-left:0.2rem">
					地址
				</span>
			</div>
			</td>
		</tr>
		<tr v-if="pagemark==0"> <!-- 所属地区 -->
			<td>
			<div class = "commonrow seporatebackgroundtwo" style="margin:0 0.5rem 0 0.3rem;height:0.72rem;line-height:0.28rem;padding-top:0.02rem;display:none">
				<span >
					<input placeholder="请输入省市区" id="addressarea" v-model="area"  class ="textinputstyle" type="text" style="border-radius:4px;background:#f5f5f5;height:0.62rem;line-height:0.28rem;padding-top:0.1rem" />
				</span>
			</div>
      <div>
         <x-address class="addresstext" @on-hide="logHide" @on-show="logShow" :title="title" v-model="value" :list="addressData" @on-shadow-change="onShadowChange"  :show.sync="showAddress"></x-address>
      </div>
			</td>
		</tr>
		<tr v-if="pagemark==0"> <!-- 所属地区 -->
			<td>
			<div class = "commonrow seporatebackgroundtwo" style="height:0.55rem;line-height:0.65rem">
				<span class = "commonleftblank" style="margin-left:0.5rem">
					详细地址
				</span>
			</div>
			</td>
		</tr>
		<tr v-if="pagemark==0">
			<td>
			<div class = "commonrow seporatebackgroundtwo"style="margin:0 0.3rem 0 0.3rem;height:0.72rem;line-height:0.28rem" >
				<div>
					<input placeholder="请输入详细的街道-小区-房号" id="addressdetail" v-model="addressdetail"  class ="textinputstyle" type="text" style="background:#f5f5f5;border-radius:4px;height:0.68rem;line-height:0.28rem;padding-top:0.05rem"  />
				</div>
			</div>
			</td>
		</tr>
		<tr style="height:0.4rem;background:#fff" v-if="pagemark==0">
			<td>
			</td>
		</tr>
		<tr style="height:0.98rem;background:#fff" v-if="pagemark!=0">
			<td>
        <div class="t-add v-c">
          <span class="yl-table-add t-add-ic" v-if="pagemark==0"></span>
           <span></span>
        </div>
			</td>
		</tr>
	</table>
  <div class="submitall" >
    <input name="input1" type="submit" value="提交" class="submitaddress" style="border:none" @click="submitaddress" />
  </div>



   <div class="mask" v-if="ispopshow"></div>
   <div class="pop" v-if="ispopshow">
     <div class="pop-title">申请成功</div>
     <p class="pop-content">您是第XX位Pick该商品的家人呢，<br>距离该产品福利更近一步啦~</p>
     <div class="pop-btn" @click="ispopshow=false">确认</div>
   </div>
</div>
</template>
<script>
import api from "src/api/index";
import ylheader from "src/components/yl-header.vue";
import { XAddress, ChinaAddressV4Data } from "vux";
import { mapState, mapMutations } from "vuex";
import { Indicator } from "mint-ui";
export default {
  name:"address",
  data() {
    return {
      name: "",
      phone: "",
      area: "",
      ispopshow:false,
      addressdetail: "",
      title: "请选择省市区",
      addressData: ChinaAddressV4Data,
      showAddress: false,
      value: [],
      isaddressconfirm:false,
      tag :"",//跳转标示
      drawType:this.$route.query.drawType,//投票类型，0普通投票，1签到投票
      pagemark:this.$route.query.type==3?1:0,
      expressAddressObj:"",//用户收货地址
    };
  },
  components: {
    ylheader,
    XAddress
  },
  computed: {
    ...mapState(["usercoin"])
  },
  mounted() {
    if(this.$route.query.type !=3){
      document.getElementsByClassName("weui-cell_access")[0].classList.add("yl-2r");
    }
      this.getExpressAddress();
  },
  methods: {
    ...mapMutations(['changeusercoin']),
    submitaddress() {
      if(this.$route.query.tag==3){
         this.getAddressStatus();
      }
      var reg = /^1[3-9]\d{9}$/;
      if (this.name == "") {
        this.$toast("请输入姓名");
        return;
      } else if (this.phone == "") {
        this.$toast("请输入手机号码");
        return;
      } else if (!reg.test(this.phone)) { 
        this.$toast("请输入正确的手机号");
        return;
      } else if (this.area == ""||this.isaddressconfirm==false) {
        if(this.$route.query.type!=3) {
          this.$toast("请输入省市区");
          return;
        }else{
          this.applyForTryout();
        }
      } else if (this.addressdetail == "") {
        this.$toast("请输入详细的街道-小区-房号");
        return;
      } else {

        if(this.$route.query.tag==0){//保存兑换记录地址
          Indicator.open();
          setTimeout(()=>{this.exchangeRealGoods()},2000);
        }else if(this.$route.query.tag==1){//保存中奖记录地址
            this.saveaddress();
        }else if(this.$route.query.tag==2){//申请试吃
            this.applyForTryout();
        }else if(this.$route.query.tag==3){
            if(this.expressAddressObj==""){
              this.saveExpressAddress();
            }else{
              this.updateExpressAddress();
            }
        }
      }
    },
    exchangeRealGoods(){
        Indicator.close();
        let tempData = {
            goodsId:this.$route.query.id ,
            receiveName:this.name,
            receivePhone:this.phone,
            receiveAddress:this.area+this.addressdetail,
        };
        api.exchangeRealGoods(tempData).then(res=>{
            if (res.success) {
              this.$util.saveFootPrint({actType:18,typeValue:this.$route.query.id});//用户轨迹
              this.$toast("兑换成功");
              this.changeusercoin(this.usercoin-parseInt(this.$route.query.price));
              this.$router.go(-1);
            } else {
              this.$toast(res.msg);
            }
        })
    },
    saveaddress(){
      let tempData = {
          token: localStorage.getItem("token"),
          id:this.$route.query.id ,
          name:this.name,
          mobile:this.phone,
          area:this.area,
          address:this.addressdetail,
      };
      api.saveaddress(tempData).then(res=>{
          if (res.success) {
            this.$router.go(-1);
          } else {
            this.$toast(res.msg);
          }
      })
    },
    applyForTryout(){
        let tempData = {
            tryoutGoodsId:this.$route.query.id ,
            name:this.name,
            mobile:this.phone,
            type:this.$route.query.type
        };
        if(this.$route.query.type!=3){
          tempData.address=this.area+this.addressdetail

        }
        api.applyForTryout(tempData).then(res=>{
          if (res.success) {
            this.$util.saveFootPrint({actType:19,typeValue:this.$route.query.id});//用户轨迹
            this.$router.go(-1);
          } else {
            this.$toast(res.msg);
          }
      })
    },
    getExpressAddress(){
      api.getExpressAddress().then(res=>{
        if(res.success){
          if(res.data!=null){
           this.expressAddressObj = res.data;
           this.name=res.data.name;
           this.phone=res.data.mobile;
           this.title=res.data.area;
           this.addressdetail=res.data.address;
           this.area=this.title;
           this.isaddressconfirm=true
          }
        }
      })
    },
    saveExpressAddress(){
        this.getAddressStatus();
        let tempData = {
            name:this.name,
            mobile:this.phone,
            area:this.area,
            address:this.addressdetail,
        };
        api.saveExpressAddress(tempData).then(res=>{
          if (res.success) {
            this.$router.go(-1);
          } else {
            this.$toast(res.msg);
          }
      })
    },
    updateExpressAddress(){
      this.getAddressStatus();
        let tempData = {
            id:this.expressAddressObj.id,
            name:this.name,
            mobile:this.phone,
            area:this.area,
            address:this.addressdetail,
        };
        api.updateExpressAddress(tempData).then(res=>{
          if (res.success) {
            this.$router.go(-1);
          } else {
            this.$toast(res.msg);
          }
      })
    },
    //判断用户是否修改地址
    getAddressStatus(){
      if( this.isaddressconfirm==false){
        this.area = this.title;
        this.isaddressconfirm=true;
      }
    },
    logHide(str) {
      // console.log("on-hide", str);
      this.isaddressconfirm=str;
      if(str==true){
        this.title="";
      }
    },
    logShow(str) {
      // console.log("on-show");
    },
    onShadowChange(ids, names) {
      // console.log(ids, names);
      this.area = names[0]+names[1]+names[2];
    }
  }
};
</script>
<style lang="less" >
input[type="text"] {
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border: 1px solid transparent;
}

.commonleftblank {
  margin-left: 0.3rem;
  display: inline-block;
  font-size: 0.28rem;
}

.commonrow {
  height: 0.86rem;
  line-height: 0.9rem;
  background: #ffffff;
}

/*顶部点击可修改*/
.toptapchange {
  height: 0.8rem;
  color: #494949;
  font-size: 0.26rem;
  width: 100%;
  line-height: 0.8rem;
  background: #f2f4f5;
}

/*表样式*/
.tablespecial {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0px;
  cellpadding: 0;
  padding-bottom: 10px;
}

/*输入框样式*/
.textoutdivstyle {
  display: inline-block;
  float: left;
  left: 2.113333rem;
  position: absolute;
}
.tablespecial tr {
  background: #fff;
}

.textinputstyle {
  height: 0.66rem;
  line-height: 0.86rem;
  margin-left: 3.813333rem;
  margin: 0px;
  padding: 0px;
  padding-left: 0.2rem;
  width: 100%;
  font-size: 0.28rem;
  border: none;
  outline: none;
}
.submitaddress {
  font-size: 0.4rem;
  width: 3.3rem;
  height: 0.84rem;
  background: #fb685b;
  border-radius: 2px;
  color: #fff;
  -webkit-appearance: none;
}
.submitall {
  background: #f5f5f5;
  margin-top: 0.3rem;
  text-align: center;
  height: 100%;
  -webkit-appearance: none;
}
.nameborder {
  border: 1px #d2d2d2 solid;
  margin: 0.29rem 0.3rem 0 0.3rem;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.phoneborder {
  border-left: 1px #d2d2d2 solid;
  border-right: 1px #d2d2d2 solid;
  border-bottom: 1px #d2d2d2 solid;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin: 0 0.3rem;
}
.namemiddleborder {
  margin-left: 0.2rem;
  width: 1.54rem;
}
.addresstext {
  height: 0.68rem;
  line-height: 0.28rem;
  border: none;
  background: #f5f5f5;
  margin: 0 0.3rem;
  font-size: 0.28rem;
  color: #474747;
  border: 1px transparent solid;
  border-radius: 4px
}
.vux-cell-box:before {
  border: none !important;
}
.weui-cell {
  padding-left: 0 !important;
}
.weui-label {
  color: #474747 !important;
  padding-left: 0.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #474747;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #474747;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #474747;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #474747;
}
.vux-popup-picker-select{
  text-align: left !important;
  padding-left: 0.2rem
}
.t-add{
  margin: 0 0.3rem;
  .t-add-ic{
    color: #fb725f;
    padding:0.05rem 0.1rem 0 0;
  }
}

.mask{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
}
.pop{
  width: 6rem;
  height: 3.56rem;
  background: #fff;
  border-radius: 0.2rem;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -1.58rem;
  margin-left: -3rem;
}
.pop-title{
  color: #333;
  font-size: 0.36rem;
  font-weight: bold;
  text-align: center;
  line-height: 0.36rem;
  padding: 0.5rem 0 0.3rem 0;
}
.pop-content{
  color: #333;
  font-size: 0.286rem;
  text-align: center;
  line-height: 0.4rem;
}
.pop-btn{
  width: 100%;
  height: 1.2rem;
  border-top: 1px solid #f5f5f5;
  color: #FB685B;
  font-size: 0.36rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.2rem;
  margin-top: 0.4rem;
}
</style>


